<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ArcGISDynamicMapService</title>
        <link rel="shortcut icon" href="img/favicon.png">
        <link rel="stylesheet" type="text/css" href="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css" />
		<script src="http://202.203.132.223/d3/d3.min.js" charset="utf-8"></script>
        <script src="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/init.js"></script>

        <link rel="stylesheet" type="text/css" href="css/add1.css">
        <link rel="stylesheet" type="text/css" href="css/nav.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/font.css">
        <link rel="stylesheet" href="css/7b66cb1a.main.css">
        <style>
          #DivFeature{
                 width: 365px;
                height: 247px;
                margin-left: 5px;
                margin-top: 15px;
          }
          #divSearch,#divSearch1{
            padding:0px !important;
            position: absolute;
            z-index:10;
            top:0px;
            right: 70px;       
            background: #fff;
            width:30%;
            height: 100%;
          }
          legend{
            margin: 0 !important;
          }
          .none{display:none;}
       
           /*  #divSearch1{
                padding:0px;
                position: absolute;
                z-index:10;
                top:0px;
                right: 70px;      
                width:28%;
                height:600px;
                border:1px solid #000;
	            float:left;
                -moz-box-sizing:border-box;
            } */
            #searchbox1{width:100%;height:30px;text-align:center;}
            #divShowResult1{
                width:100%;
                height:300px;
                padding:0px !important;
                margin:0px !important;
            }
    
          
        </style>
        <script>
            var map;
            var newGraphic=null;
            var selectedTemplate;
            var newAttributes
            var myGraphicLayer;
            var myLayer=null;
            var myGraphic=null;
            var myJson={};
            var landuseLineLayer;
            var dataset=new Array();
            var datalayer=new Array();
            var MapServer;
            var FindTask;
              require([
                "esri/map",
                "esri/toolbars/draw",
                "esri/toolbars/edit",
                "esri/graphic",
                "esri/config",

                "esri/layers/FeatureLayer",
                "esri/layers/WebTiledLayer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",

                "esri/dijit/editing/TemplatePicker",

                "dojo/_base/array",
                "dojo/_base/event",
                "dojo/_base/lang",
                "dojo/parser",
                "dijit/registry",

                "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
                "dijit/form/Button", "dojo/domReady!"
              ], function(
                Map, Draw, Edit, Graphic, esriConfig,
                FeatureLayer,WebTiledLayer,
                SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
                TemplatePicker,
                arrayUtils, event, lang, parser, registry
              ) {
                parser.parse();

                // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
                esriConfig.defaults.io.proxyUrl = "/proxy/";

                // This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
                esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://202.203.132.223:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

                var opts={//extent:new esri.geometry.Extent({
                    //"xmin":103.6,
                    //"ymin":28.5,
                    //"xmax":104.2,
                    //"ymax":32.3,
                    //"spatialReference":{"wkid":4326},
                  //}),
                  center: [104.02,27.83],
                  zoom:13  
                };

                map = new Map("mymap",opts);

                map.on("layers-add-result", initEditing);

                // var osmLayer=new esri.layers.OpenStreetMapLayer();
                // map.addLayer(osmLayer); //0
                MapServer = "http://202.203.132.223:6080/arcgis/rest/services/test/MapServer"; 
            	FindTask = new esri.tasks.FindTask(MapServer);
            	findParams = new esri.tasks.FindParameters();
                //var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
                //map.addLayer(myTiledMapServiceLayer);

                //var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://202.203.132.223:6080/arcgis/rest/services/subset_new/MapServer"); 
                //map.addLayer(tiledLayer);

            	//var dynamiclayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://202.203.132.223:6080/arcgis/rest/services/subset_/MapServer");
            	// var dynamiclayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://202.203.132.223:6080/arcgis/rest/services/遥感图/google18/MapServer");
             //    map.addLayer(dynamiclayer);
                var mapQuest = new esri.layers.WebTiledLayer("http://202.203.132.223:7999/offline/{level}/{col}/{row}.jpg", {
                   //"id": "mapQuest",
                   //"subDomains": mqSubDomains,
                   //"copyright": "MapQuest © 2012"
                   SpatialReference: 4326
               });
               var Street = new esri.layers.WebTiledLayer("http://202.203.132.223:7999/overlay_s/{level}/{col}/{row}.png", {
                   //"id": "mapQuest",
                   //"subDomains": mqSubDomains,
                   //"copyright": "MapQuest © 2012"
                   SpatialReference: 4326
               });
               map.addLayer(mapQuest);
               map.addLayer(Street);

                var myInfoTemplate=new esri.InfoTemplate("${Name}","名称：${Name},${Village}");

                landuseLineLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/2", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    infoTemplate:myInfoTemplate,
                    outFields: ["*"]
                });
                //var landusePointLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/0", {
                    //mode: FeatureLayer.MODE_SNAPSHOT,
                    //infoTemplate:myInfoTemplate,
                    //outFields: ["*"]
                //});

                //map.addLayers([landusePointLayer]);
                map.addLayers([landuseLineLayer]);
                //map.addLayers([landusePointLayer, landuseLineLayer]);
                 //var myPoint=new esri.geometry.Point(104,24.8);
                //map.centerAt(myPoint);
                //map.centerAndZoom(myPoint,11);
                dojo.connect(landuseLineLayer,'onClick',showD3);
                dojo.connect(landuseLineLayer,'onClick',showD31);
                function initEditing(evt) {
                    console.log("initEditing", evt);

                    // var map = this;
                    var currentLayer = null;
                    var layers = arrayUtils.map(evt.layers, function(result) {
                        return result.layer;
                    });
                    console.log("layers", layers);

                    var editToolbar = new Edit(map);
                    editToolbar.on("deactivate", function(evt) {
                    currentLayer.applyEdits(null, [evt.graphic], null);
                });

                arrayUtils.forEach(layers, function(layer) {
                    var editingEnabled = false;
                    layer.on("dbl-click", function(evt) {
                        evt.stopPropagation();
                        event.stop(evt);
                        if (editingEnabled === false) {
                            editingEnabled = true;
                            editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
                        } else {
                            currentLayer = this;
                            editToolbar.deactivate();
                            editingEnabled = false;
                        }
                    });

                    layer.on("click", function(evt) {
                        var attr=evt.graphic.attributes; 
                        myLayer=layer;
                        myGraphic=evt.graphic;
                        dojo.byId("Name").value=attr["Name"];
                        dojo.byId("Area").value=attr["test.SDE.village.Area"];
                        dojo.byId("Count").value=attr["Count_"];
                        dojo.byId("Population").value=attr["Population"];
                        dojo.byId("Labor").value=attr["Labor"];
                        //showD3();


                        event.stop(evt);
                        if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
                            layer.applyEdits(null,null,[evt.graphic]);
                            currentLayer = this;
                            editToolbar.deactivate();
                            editingEnabled=false;
                        }
                    });
                });
                //创建要素模板
                var templatePicker = new TemplatePicker({
                    featureLayers: layers,
                    rows: "auto",
                    columns: 2,
                    grouping: true,
                    style: "height: auto; overflow: auto;"
                }, "DivFeature");

                templatePicker.startup();

                var drawToolbar = new Draw(map);

                templatePicker.on("selection-change", function() {
                    if( templatePicker.getSelected() ) {
                      selectedTemplate = templatePicker.getSelected();
                    }
                    switch (selectedTemplate.featureLayer.geometryType) {
                      case "esriGeometryPoint":
                        drawToolbar.activate(Draw.POINT);
                        break;
                      case "esriGeometryMultipoint":
                        drawToolbar.activate(Draw.MULTI_POINT);
                        break;
                      case "esriGeometryPolyline":
                        drawToolbar.activate(Draw.POLYLINE);
                        break;
                      case "esriGeometryPolygon":
                        drawToolbar.activate(Draw.POLYGON);
                        break;
                    }
                });

                drawToolbar.on("draw-end", function(evt) {
                    drawToolbar.deactivate();
                    editToolbar.deactivate();
                    newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
                    //line symbol
                    // var lineSymbol=new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new dojo.Color([255,0,0]),3);
                    var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                    new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25])
                    );
                    var graphicPolygon=new esri.Graphic(evt.geometry,sfs);
                    myGraphicLayer=new esri.layers.GraphicsLayer();
                    map.addLayer(myGraphicLayer);
                    myGraphicLayer.add(graphicPolygon);

                    newGraphic = new Graphic(evt.geometry, null, newAttributes);
                    //selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                });
                    dojo.connect(dojo.byId('save'),'onclick',mySavePoint);
                    dojo.connect(dojo.byId('cancel'),'onclick',myCancelSave);
                    dojo.connect(dojo.byId('reset'),'onclick',myResetText);
                    dojo.connect(dojo.byId('saveChange'),'onclick',mySaveChange);
                }
        

                function mySaveChange(){
                    var flag=false;//判断各个字段内容是否有改变
                    if(myGraphic==null){
                        alert("请先选择元素！");
                        return;
                    }
                    if(dojo.byId("Name").value==""){
                        alert("名字不能为空！！");
                        return;
                    }                    
                    newAttributes=myGraphic.attributes;
                    if(newAttributes["Name"]!=dojo.byId("Name").value){
                        alert("名字不同，不能修改！");
                        return;
                    }
                    if(dojo.byId("Area").value!=newAttributes["test.SDE.village.Area"]){
                        newAttributes["test.SDE.village.Area"]=dojo.byId("Area").value;
                        flag=true;
                    }
                    if(dojo.byId("Count").value!=newAttributes["Count_"]){
                        newAttributes["Count_"]=dojo.byId("Count").value;
                        flag=true;
                    }
                    if(dojo.byId("Population").value!=newAttributes["Population"]){
                        newAttributes["Population"]=dojo.byId("Population").value;
                        flag=true;
                    }
                    if(dojo.byId("Labor").value!=newAttributes["Labor"]){
                        newAttributes["Labor"]=dojo.byId("Labor").value;
                        flag=true;
                    }
                    // if(dojo.byId("EndBuildTime").value!=newAttributes["EndBuildTime"]){
                    //     newAttributes["EndBuildTime"]=dojo.byId("EndBuildTime").value;
                    //     flag=true;
                    // }

                    if(flag==false){
                        alert("内容无变化，无需修改！！")
                        return;
                    }
                    newGraphic = new Graphic(myGraphic.geometry, null, newAttributes);
                    myLayer.applyEdits(null, [newGraphic], null);
                    //myGraphicLayer.clear();
                    flag=false;
                    myLayer=null;
                    myGraphic=null;
                    myResetText();
                    newGraphic=null;
                    newAttributes=null;  
                    alert("修改成功！")   
                }

                function mySavePoint(){
                    if(newGraphic==null){
                        alert("请先在地图上画线！");
                        return;
                    }
                    if(dojo.byId("Name").value==""){
                        alert("名字不能为空！！");
                        return;
                    }
                    newAttributes["Name"]=dojo.byId("Name").value;
                    if(dojo.byId("Area").value!="")
                        newAttributes["test.SDE.village.Area"]=dojo.byId("Area").value;
                    if(dojo.byId("Count").value!="")
                        newAttributes["Count_"]=dojo.byId("Count").value;
                    if(dojo.byId("Population").value!="")
                        newAttributes["Population"]=dojo.byId("Population").value;
                    if(dojo.byId("Labor").value!="")
                        newAttributes["Labor"]=dojo.byId("Labor").value;
                    // if(dojo.byId("EndBuildTime").value!="")
                    //     newAttributes["EndBuildTime"]=dojo.byId("EndBuildTime").value;
                    //var id=dojo.byId("PovertyState");
                    //var option=id.options;
                    //var value=id.value;
                    //var selected=option[value-1].innerHTML;
                    //newAttributes["PovertyState"]=selected;
                    //if(dojo.byId("Reason").value!="")
                        //newAttributes["Reason"]=dojo.byId("Reason").value;
                    //if(dojo.byId("PhoneNumber").value!="")
                        //newAttributes["PhoneNumber"]=dojo.byId("PhoneNumber").value;
                    //if(dojo.byId("Supporters").value!="")
                        //newAttributes["SupportersName"]=dojo.byId("Supporters").value;
                    //if(dojo.byId("SupportersInstitution").value!="")
                        //newAttributes["SupportersInstitution"]=dojo.byId("SupportersInstitution").value;
                    selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                    myGraphicLayer.clear();
                    newGraphic=null;
                    alert("保存成功！");
                }
                function myCancelSave(){
                    dojo.byId("Name").value="";
                    dojo.byId("Area").value="";
                    dojo.byId("Count").value="";
                    dojo.byId("Population").value="";
                    dojo.byId("Labor").value="";
                    dojo.byId("Reason").value="";
                    dojo.byId("PhoneNumber").value="";
                    dojo.byId("Supporters").value="";
                    dojo.byId("SupportersInstitution").value="";
                    myGraphicLayer.clear(); 
                    newGraphic=null;                  
                }
                function myResetText(){
                    dojo.byId("Name").value="";
                    dojo.byId("Area").value="";
                    dojo.byId("Count").value="";
                    dojo.byId("Population").value="";
                    dojo.byId("Labor").value="";
                    dojo.byId("Reason").value="";
                    // dojo.byId("PhoneNumber").value="";
                    dojo.byId("Supporters").value="";
                    dojo.byId("SupportersInstitution").value="";
                }


              });
			    function showD3(evt){

			    var el1=document.getElementById('divSearch');
			    el1.className='none';
			    var el2=document.getElementById('divSearch1');
			    el2.removeAttribute('class');


                //清除datalayer内容
                datalayer.length=0
                var queryName=evt.graphic.attributes["Name"]
                //alert(queryName);
                findParams.returnGeometry = true; 
                findParams.layerIds = [0]; 
                findParams.searchFields = ["Village"]; 
                findParams.searchText = queryName; 
                FindTask.execute(findParams, ShowFindResult);
                //myF();
                //return dataset;
                
            }
            function ShowFindResult(queryResult){
                for(var i =0;i < queryResult.length; i++)
                {
                    var layer=queryResult[i]
                    var graphic=queryResult[i].feature;
                    var population=graphic.attributes["Population"];
                    var name=graphic.attributes["Name"];
                    // dataset.push(population);
                    datalayer.push(layer);
                    var obj={};
                    obj.NAM=name;
                    obj.POP=population;
                    dataset[i]=obj;
                }
                // console.log(dataset);
                myF();

            }

            function myaa(){
             var o = document.getElementById("select");
             o.innerHTML="";
             for (var i = 0; i < datalayer.length; i++) {

              var op = document.createElement("option");
              op.setAttribute("value",i);
              op.innerHTML = datalayer[i].feature.attributes["Name"];
              o.appendChild(op);

             }
             var select = document.getElementById('select');
             select.onchange = function () {
                 queryInformation();
             }
             queryInformation();
            }
            function myF() {
            //alert(dataset);
            //初始化div
            var a=document.getElementById("D31");
            a.innerHTML="";
            //画布大小
            var width = 356;
            var height = 250;

            //在 body 里添加一个 SVG 画布   
            var svg = d3.select("#D31")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);

            //画布周边的空白
            var padding = { left: 40, right:25, top: 20, bottom: 50 };
            
            //x轴的比例尺
            var xScale = d3.scale.ordinal()
                            //.domain([2010, 2011, 2012, 2013, 2014, 2015, 2016，2017])
                            // .domain(d3.range(dataset.length))
                            .domain(dataset.map(function(d) { return d.NAM; }))
                            .rangeRoundBands([0, width - padding.left - padding.right]);

            //y轴的比例尺
            var yScale = d3.scale.linear()
                            .domain([0, 8])
                            .range([height - padding.top - padding.bottom, 0]);

            //定义x轴
            var xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient("bottom");
                        // .tickFormat(d3.time.format("%y年%m月"))  //set tick name in Chinese  
                        // .ticks(d3.time.months, 1);  //set ticks for x axis as monthly

            //定义y轴
            var yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left");
            //矩形之间的空白
            var rectPadding = 4;

            //添加矩形元素
            var rects = svg.selectAll(".MyRect")
                            .data(dataset)
                            .enter()
                            .append("rect")
                            .attr("class", "MyRect")
                            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                            // .attr("x", function (d, i) {
                            //     return xScale(i) + rectPadding / 2;
                            // })
                            .attr("x", function(d,i){
                                return xScale(d.NAM); 
                                //return xScale(i);
                            })
                            // .attr("y", function (d) {
                            //     return yScale(d.POP);
                            // })
                            .attr("y", function(d){
                                return yScale(d.POP);
                                //return width - 150 - yScale(d);
                            })
                            .attr("width", xScale.rangeBand() - rectPadding)
       //                      .attr("width",function(){
                            //  return xScale.rangeBand() - 4;
                            // })
                            .attr("height", function (d) {
                                return height - padding.top - padding.bottom - yScale(d.POP);
                            })
                            .attr("fill",function(d){
                                return "rgb("+(d*20)+","+(d*20)+",255)"
                            });
                            // .on("mouseover",function(){  
                            //     d3.select(this)  
                            //       .attr("fill","orange")
                            // })
                            // .on("mouseout",function(d){  
                            //     d3.select(this)  
                            //       .transition()  
                            //       .duration(250)  
                            //       .attr("fill","rgb("+(d*30)+","+(d*30)+",255)")
                            // });

            //添加文字元素
            var texts = svg.selectAll(".MyText")
                            .data(dataset)
                            .enter()
                            .append("text")
                            .attr("class", "MyText")
                            .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                            .attr("x", function (d, i) {
                                return xScale(d.NAM) + rectPadding/10
                            })
                            .attr("y", function (d) {
                                return yScale(d.POP);
                            })
                            .attr("dx", function () {
                                return (xScale.rangeBand() - rectPadding) / 2;
                            })
                            .attr("dy", function (d) {
                                return 20;
                            })
                            .text(function (d) {
                                return d.POP;
                            });

            //添加x轴
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
                .call(xAxis);

            //x轴文字旋转
            d3.selectAll("g.axis g.tick text")  
                .attr("x",20)  
                // .attr("transform","translate(30,50")
                .attr("transform", "rotate(65)");
                // .attr("transform", "rotate(90)");   

            //添加y轴
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .call(yAxis)
                .append("text")
                .text("人口")
                .attr("transform","translate(6,5)");
            //清除dataset
            myaa();
            dataset.length=0;
            //datalayer.length=0;
        }
        function showD31(evt){
                //清除datalayer内容
                datalayer.length=0             
                var queryName=evt.graphic.attributes["Name"]
                //alert(queryName);
                findParams.returnGeometry = true; 
                findParams.layerIds = [0]; 
                findParams.searchFields = ["Village"]; 
                findParams.searchText = queryName; 
                FindTask.execute(findParams, ShowFindResult1);
            }
            function ShowFindResult1(queryResult){
                var a=0;
                var b=0;
                var c=0;
                for(var i =0;i < queryResult.length; i++)
                {
                    var layer=queryResult[i]
                    var graphic=queryResult[i].feature;
                    var labor=graphic.attributes["Labor"];
                    var population=graphic.attributes["Population"];
                    // alert(PovertyState);
                    a=a+Number(labor);//总劳动力
                    b=b+Number(population);//总人口
                }
                c=b-a;//非劳动力
                dataset=new Array(a,c);
                // alert(dataset);
                myF1();
            }

            function myF1(){
                var a=document.getElementById("D3");
                a.innerHTML="";
                var width = 280;
                var height = 280;                
                var svg = d3.select("#D3")
                            .append("svg")
                            .attr("width", width)
                            .attr("height", height);
                
                var pie = d3.layout.pie();

                var piedata = pie(dataset);
                
                var outerRadius = 100;  //外半径
                var innerRadius = 0;    //内半径，为0则中间没有空白

                var arc = d3.svg.arc()  //弧生成器
                            .innerRadius(innerRadius)   //设置内半径
                            .outerRadius(outerRadius);  //设置外半径
                
                var color = d3.scale.category10();
                
                var arcs = svg.selectAll("g")
                              .data(piedata)
                              .enter()
                              .append("g")
                              .attr("transform","translate("+ (width/2) +","+ (width/2) +")");
                              
                arcs.append("path")
                    .attr("fill",function(d,i){
                        return color(i);
                    })
                    .attr("d",function(d){
                        return arc(d);
                    });
                
                arcs.append("text")
                    .attr("transform",function(d){
                        return "translate(" + arc.centroid(d) + ")";
                    })
                    .attr("text-anchor","middle")
                    .text(function(d){
                        if (d.value==dataset[0])
                            return "劳动力:"+d.value;
                        else
                            return "非劳动力:"+d.value;
                    });
                //添加分组标签
            //     var labHeight = 50;
            //     var labRadius = 10;
                
            //     var labelCircle = groups.append("circle")
            //                         .attr("cx",function(d){ return width - padding.right*0.98; })
            //                         .attr("cy",function(d,i){ return padding.top * 2 + labHeight * i; })
            //                         .attr("r",labRadius);
                                
            //     var labelText = groups.append("text")
            //                         .attr("x",function(d){ return width - padding.right*0.8; })
            //                         .attr("y",function(d,i){ return padding.top * 2 + labHeight * i; })
            //                         .attr("dy",labRadius/2)
            //                         .text(function(d){ return d.value; });
            }
        function queryInformation(){
            var id=dojo.byId("select");
            var option=id.options;
            var value=id.value;
            //alert(value);
            // if(datalayer[i].feature.attributes["Name"]==value){
            var ma=new Array();
            ma=datalayer[value].feature.attributes;
            //alert(ma.Name);

            dojo.byId("Name0").value=ma.Name;
            dojo.byId("Village0").value=ma.Village;
            dojo.byId("Population0").value=ma.Population;
            dojo.byId("Labor0").value=ma.Labor
            dojo.byId("Reason0").value=ma.Reason
            dojo.byId("PhoneNumber0").value=ma.PhoneNumbe
            dojo.byId("Supporters0").value=ma.Supporters
            dojo.byId("SupportersInstitution0").value=ma.Supporte_1
                           // }
        }
        function detailedInfo() {
            window.open("login.aspx");
        }
        function  exit(){
        	var elx=document.getElementById('divSearch1');
			         elx.className='none';
            var ely=document.getElementById('divSearch');
			        ely.removeAttribute('class');


        }
        function init(){
        	 var ell=document.getElementById('divSearch1');
			         ell.className='none';

        }
        </script>

    </head>
  </head>
<body onload="init();">
    <div id="mapContainer">
            <nav>
                <div class="title">
                    <img src="img/font.png" alt="">
                </div>
                <div class="userinfo">
                    <a class="info-list" href="javascript:;">
                        <i class="icon icon-user-tie"></i>
                        <span>联系人:陈旭</span>
                    </a>
                    <a class="info-list" href="javascript:;">
                        <i class="icon iconfont icon-contact"></i>
                      <span>电话:13888315351</span>
                    </a>

                </div>
            </nav>
    	    <div class="mapdiv" id="mapdiv">
                <div class="container">     
                    <div class="top">
                        <div class="jiao"></div>
                        <div class="area form-group">
                           请选择扶贫区域：
                           <select id="fupinfield" class="form-control">
                             <option value="dongchuan">东川区</option>
                             <option value="daguan" selected="selected">大关县</option>
                           </select> 
                          
                         </div>
                         <div id="DivBottom"><a href="javascript:window.history.back(-1);">返回上一层</a></div>           
                    </div>
                    <div class="map">
                        <div id="mymap"></div>
                        <div id="divSearch">
                            <div id="property">
                               <form action="#">
                                    <fieldset>
                                       <legend>ProvertyInformation</legend>
                                       <table>
                                          <tr>
                                              <td class="txt">*名字: </td><td><input id="Name" type="text"></td>
                                          </tr>   
                                          <tr>  
                                              <td class="txt">面积: </td><td><input id="Area" type="text"></td>
                                          </tr>   
                                          <tr>
                                              <td class="txt">贫困人数:</td><td> <input id="Count" type="text"></td>
                                          </tr>   
                                          <tr>
                                              <td class="txt">总人口:</td><td> <input id="Population" type="text"></td>
                                          </tr>   
                                          <tr>
                                              <td class="txt">劳动力数:</td><td> <input id="Labor" type="text"></td>
                                          </tr>   
                                          <tr>
                                              <td class="txt">贫困状态:</td>
                                              <td><select name="" id="PovertyState"  disabled="disabled">
                                                      <option value="1" selected="true">贫困户</option>
                                                      <option value="2" >脱贫户</option>
                                                  </select></td>
                                          </tr>   
                                          <tr>
                                              <td class="txt">原因:</td><td><input id="Reason" type="text" disabled="disabled"></td>
                                          </tr>   
                    
                                          <tr>
                                              <td class="txt">挂包人:</td><td><input id="Supporters" type="text" disabled="disabled">  </td>
                                          </tr>   
                                          <tr>    
                                              <td class="txt">挂包单位:</td><td><input id="SupportersInstitution" type="text"disabled="disabled"></td>
                                          </tr>                             
        
                                       </table>
        
                                    </fieldset> 
                                    <div class="button">
                                       <input id="save" type="button" value="保存" >
                                       <input id="saveChange" type="button" value="修改" >               
                                       <input id="reset" type="button" value="重置"> 
                                       <input id="cancel" type="button" value="取消">
                                    </div>
        
                               </form>
                            </div>
                            <div id="DivFeature"></div>
                        </div>
                        <div id="divSearch1">
                           <div class="property">
                                <div id="searchbox1">
                                    <select id="select">
                                    <option>贫困户</option>
                                    </select>
                                    &nbsp;&nbsp;
                                    <input id="myQuery" type="button" value="查询" title="查询" onclick="return queryInformation()"/>
                                    &nbsp;&nbsp;
                                    <input id="exit" type="button" value="返回" title="返回" onclick="return exit()"/>
                                </div>
                                <div id="divShowResult1">
                                      <div class="property1">
                                        <form action="#">

                                                <table>
                                                    <tr>
                                                        <td class="txt">*姓名: </td><td><input id="Name0" type="text"></td>
                                                    </tr>   
                                                    <tr>  
                                                        <td class="txt">所属村: </td><td><input id="Village0" type="text"></td>
                                                    </tr>   
                                                    <tr>
                                                        <td class="txt">人口数:</td><td> <input id="Population0" type="text"></td>
                                                    </tr>   
                                                    <tr>
                                                        <td class="txt">劳动力数:</td><td> <input id="Labor0" type="text"></td>
                                                    </tr>      
                                                    <tr>
                                                        <td class="txt">致贫原因:</td><td><input id="Reason0" type="text"></td>
                                                    </tr>   
                                                    <tr>    
                                                        <td class="txt">电话号码:</td><td><input id="PhoneNumber0" type="text"></td>
                                                    </tr>   
                                                    <tr>
                                                        <td class="txt">挂包人:</td><td><input id="Supporters0" type="text"></td>
                                                    </tr>   
                                                    <tr>    
                                                        <td class="txt">挂包单位:</td><td><input id="SupportersInstitution0" type="text"></td>
                                                    </tr>                             
                                                </table>
                                        </form>
                                      </div>
                                </div>
                           </div>           
                           <div class="newscenter">
                                <ul id="tags">
                                    <li class=selectTag><a onClick="selectTag('tagContent0',this)" href="javascript:void(0)">       人口数统计  </a> </li>
                                    <li><a onClick="selectTag('tagContent1',this)" href="javascript:void(0)">劳动人口比</a> </li>
                                
                                </ul>
                                <div id="tagContent">
                                    <div class="tagContent selectTag" id="tagContent0">
                                        <div id="D31"></div>
                                    </div>
                                    <div class=tagContent id="tagContent1">
                                        <div id="D3"></div>
                                    </div>
                                    <script type=text/javascript>
                                         function selectTag(showContent,selfObj){
                                             // 标签
                                             // dojo.disconnect(landuseLineLayer,'onClick',showD3);
                                             // //dojo.disconnect(landuseLineLayer,'onClick',showD31);
                                             // dojo.connect(landuseLineLayer,'onClick',showD3);
                                             var tag = document.getElementById("tags").getElementsByTagName("li");
                                             var taglength = tag.length;
                                             for(i=0; i<taglength; i++){
                                             tag[i].className = "";
                                             }
                                             selfObj.parentNode.className = "selectTag";
                                             // 标签内容
                                             for(i=0; j=document.getElementById("tagContent"+i); i++){
                                             j.style.display = "none";
                                             }
                                             document.getElementById(showContent).style.display = "block";
                                         }
                                    </script>
                    
                                </div>
                            </div>   
                        </div>  
                          <div class="m-navigation-bar m-navigation">
                              <ul class="m-navigation--primary">
                                  <li class="nav-item nav-search">
                                       <span class="nav-item-icon">
                                          <img  title="搜索" class="" src="img/search.png" alt="" onclick=""/ >
                                       </span>
                                       <span class="nav-item-title">搜索</span>
                                       <span class="nav-item-background"></span>
                                  </li>
       
                            
                                  <li class="nav-item nav-select">
                                    <span class="nav-item-icon">
                                       <img  title="选择" class="" src="img/select.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">选择</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                                
                                  <li class="nav-item nav-add">
                                    <span class="nav-item-icon">
                                       <img  title="添加" class="" src="img/add.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">添加</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                               
                                  <li class="nav-item nav-location">
                                    <span class="nav-item-icon" >
                                        <img  title="定位" class="" src="img/location.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">定位</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                              </ul>
                           </div>  
                    </div>               
                </div>
                   
            </div>     
            <div class="slider">  
               <ul>
                      <li id="manager"><img src="img/2d.png" style="width:80%;height:80%"><span>2D<br>平面</span></li>
		  	           <li onclick="return myUniqueRender()"><img src="img/xuanran.png" style="width:80%;height:80%"><span>分级<br> 渲染</span></li>
		  	           <li><img src="img/heatmap.png" style="width:80%;height:80%"><span>热度图</span></li>
		  	           <li onclick="return opensand()"><img src="img/3D.png" style="width:80%;height:80%"><span>2/3D联动</span></li>
		  	           <li onclick="return opentimeline()"><img src="img/fupin.png" style="width:80%;height:80%"><span>扶贫  <br>动态</span></li>
               </ul>
            </div>       
    </div>
 
      
   
</body>
</html>